<!--
 * @Author: xuna
 * @Descripttion: 短信通知模板
-->
<template>
  <div v-if="isCare == 0" class="message-container">
    <div v-for="(item, index) in messageList" :key="index" class="message-col">
      <img :src="item.img" alt="" />
      <div class="message-info">
        <p class="title">{{ item.title }}</p>
        <span>{{ item.tips }}</span>
        <span>• 发送时间</span>
        <p>{{ item.time }}</p>
        <span>• 短信内容</span>
        <p>{{ item.messageCont }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { querySmsModel, queryCardSmsNotice } from '@/api/careModule';
  import defacareImg from '@/assets/img/defcare_img.png';
  import messcareImg from '@/assets/img/card_mess.png';
  import { getLocalData } from '@/utils/localStore';
  export default {
    props: {
      isCare: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        loading: false,
        messageList: [
          {
            title: '生日短信祝福',
            tips: '• 设置短信祝福后，员工将会在生日当天收到来自企业的定制生日祝福短信。',
            time: '员工生日当天10:00-11:00期间任意时间点',
            messageCont: '',
            img: defacareImg,
          },
          {
            title: `薪享卡发放通知`,
            tips: `• 设置短信内容后，员工将会在薪享卡发放当天收到来自企业的定制福利短信。`,
            time: `薪享卡发送成功的时间点`,
            messageCont: '',
            img: messcareImg,
          },
        ],
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
      welfareName() {
        return getLocalData('welfareName');
      },
    },
    watch: {},
    activated() {
      this.messageList[1].title = `${this.welfareName}发放通知`;
      this.messageList[1].tips = `• 设置短信内容后，员工将会在${this.welfareName}发放当天收到来自企业的定制福利短信。`;
      this.messageList[1].time = `${this.welfareName}发送成功的时间点`;
      querySmsModel().then(res => {
        if (res.status == 200) {
          console.log(res);
          this.messageList[0].messageCont = res.data.modelContent;
        }
      });
      queryCardSmsNotice().then(res => {
        if (res.status == 200) {
          this.messageList[1].messageCont = res.data.modelContent;
        }
      });
    },
    methods: {
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .message-container {
    .message-col {
      display: flex;
      padding: 14px;
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      border-radius: 7px;
      margin-bottom: 17px;
      font-weight: 400;
      > img {
        @include wh(115px, 191px);
        margin-right: 13px;
      }
      .message-info {
        font-size: 13px;
        p {
          color: #353739;
          &.title {
            @include font(14px, #34363b, 800);
          }
        }
        span {
          color: #7f848b;
          line-height: 28px;
          display: block;
        }
      }
    }
  }
</style>
